<template>
  <div class="app-wrapper" id="app-wrapper" :class="{ Mobile: isMobile }">
    <div class="main-container">
      <div class="sidebar-wrapper">
        <sidebar
          :isMobile="isMobile"
          class="sidebar-container"
          :detail="false"
          :lightHeight="5"
        ></sidebar>
      </div>
      <div
        class="main-layout"
        id="main-layout"
        :style="{
          left: isMobile ? '0' : '50px',
          padding: isMobile ? '1px' : '20px 40px 20px 20px',
          top: isMobile ? '50px' : '0',
          'overflow-y': isMobile ? 'scroll' : isScroll ? 'scroll' : '',
        }"
      >
      <div class="page-main">
        <header class="header clearfix">
          <div class="title">&nbsp;&nbsp;QHSE管理</div>
        </header>
        <div class="product" :style="{ display: isMobile ? 'block' : '' }">
          <div
            class="product-view-item"
            id="product-view-item"
             :style="{height: isMobile ? '340px !important' : viewListHeight + 'px !important'}"
          >
            <div class="product-view-item-chart"
             :style="{
                'margin-right': isMobile ? '' : '10px',
                'width': isMobile ? '100%' : 'calc(50% - 10px)',
                'margin-top': isMobile ? '20px' : '',
                'height': isMobile ? '340px !important' : viewListHeight + 'px !important'
              }"
            >
              <clues :isMobile="isMobile"></clues>
            </div>
            <div
              class="product-view-item-list"
              :style="{
                'margin-left': isMobile ? '' : '10px',
                'width': isMobile ? '100%' : 'calc(50% - 10px)',
                'margin-top': isMobile ? '20px' : '',
                'height': isMobile ? '300px' : viewListHeight + 'px'
              }"
            >
             <satisfaction :rectification="rectification" :isMobile="isMobile"></satisfaction>
            </div>
          </div>
          <div
            class="product-view-item"
          >
            <div class="product-view-item-chart"
              :style="{
                'margin-right': isMobile ? '' : '10px',
                'width': isMobile ? '100%' : 'calc(40% - 10px)',
                'margin-top': isMobile ? '20px' : '20px',
                'height': isMobile ? '340px' : viewListHeight + 'px'
              }"
            >
              <satisfaction-tab :isMobile="isMobile" :listArray="NCR"></satisfaction-tab>
            </div>
            <div
              id="satisfaction-box"
              class="product-view-item-list"
              :style="{
              'margin-left': isMobile ? '' : '10px',
               'width': isMobile ? '100%' : 'calc(60% - 10px)',
              'margin-top': isMobile ? '20px' : '20px',
              'height': isMobile ? '400px' : viewListHeight + 'px'
            }"
            >
             <clues-table :isMobile="isMobile"  :tableData="constructionProgress"></clues-table>
            </div>
          </div>
        </div>
      </div>
      </div>
    </div>
  </div>
</template>
<script>

import { isMobile } from '../../utils/index'
import Clues from './components/clues'
import CluesTable from './components/clues_table'
import Satisfaction from './components/satisfaction'
import SatisfactionTab from './components/satisfaction_tab'
import Sidebar from '../../components/Sidebar'
import { toast } from '@/common/toast'
import { getQHSENCRInfo, constructionProgressInfo, qualityAndSecurityRectInfo } from '@/api/api'
export default {
  name: 'Clue',
  components: {
    Clues,
    Satisfaction,
    SatisfactionTab,
    CluesTable,
    Sidebar
  },
  data () {
    return {
      NCR: [],
      constructionProgress: [],
      rectification: [],
      isScroll: false,
      isMobile: false,
      viewListHeight: 300
    }
  },
  methods: {
    /***
     * 根据项目id获取QHSE管理-业主NCR
     * */
    getQHSENCRInfo: async function (projectId) {
      const response = await getQHSENCRInfo(projectId)
      if (response && response.statusCode === '200') {
        var arr = response.result.filter((item) => { return item.name !== '登记' })
        var p = arr.find((item) => { return item.name === '百分比' })
        arr.forEach(element => {
          element.percent = p.percent
        })
        this.NCR = arr
      }
    },

    /**
     * 根据id获取QHSE管理-监造进展数据信息
     * */
    getConstructionProgressInfo: async function (projectId) {
      const response = await constructionProgressInfo(projectId)
      if (response && response.statusCode === '200') {
        this.constructionProgress = response.result
      }
    },

    /**
     *  根据项目id获取QHSE管理-质量及安全整改信息qualityAndSecurityRectInfo
     * */
    getQualityAndSecurityRectInfo: async function (projectId) {
      const response = await qualityAndSecurityRectInfo(projectId)
      if (response && response.statusCode === '200') {
        this.rectification = response.result
      }
    }
  },
  created () {
    this.isMobile = isMobile()
    const projectId = this.$route.query.projectId
    if (!projectId) {
      return toast('无效项目')
    }
    this.getQHSENCRInfo(projectId)
    this.getConstructionProgressInfo(projectId)
    this.getQualityAndSecurityRectInfo(projectId)
  },
  mounted: async function () {
    var viewListHeight = ($(window).height() - 150) / 2
    this.viewListHeight = this.isMobile ? viewListHeight <= 200 ? 200 : viewListHeight - 50
      : viewListHeight
    $(window).resize((v) => {
      this.isMobile = isMobile()
      var viewListHeight = ($(window).height() - 150) / 2
      this.viewListHeight = this.isMobile ? viewListHeight <= 200 ? 200 : viewListHeight - 50
        : viewListHeight
      this.$EventBus.$emit('loadEnd')
      this.$forceUpdate()
    })
    setTimeout(() => {
      this.$EventBus.$emit('loadEnd')
    }, 300)
  }
}
</script>
<style lang="scss" scoped>
.page-main {
  padding-top: 20px;
}
.product {
  margin-top: 4px;
  .product-view-item {
    width: 100%;
     height: 350px;
    .product-view-item-chart {
      float: left;
      height: 350px;
      display: inline-block;
      header {
        height: 40px;
        width: 100%;
        background: #4a4e6080;
        .title {
          margin-left: 30px;
          margin-top: 11px;
          height: 18px;
          line-height: 18px;
          padding-left: 10px;
          border-left: 4px solid #008bf3;
          font-weight: 700;
          font-size: 17px;
        }
      }
      ul {
        height: 308px;
        background: #4a4e6080;
        .chart-item {
          .area {
          }
          .chart {
          }
        }
      }
    }
    .product-view-item-list {
      float: left;
        height: 350px;
         display: inline-block;
      // background: #4a4e6080;
    }
  }
}
.header {
  height: 40px;
  width: 100%;
  .title {
     margin-top: 7px;
    height: 14px;
      line-height: 14px;
      padding-left: 10px;
      border-left: 4px solid #008bf3;
      font-weight: 700;
      font-size: 17px;
      color: #fff;
      padding-left: 10px;
  }
}
.title-loading {
  height: 20px;
  margin-top: 10px;
  width: 60%;
}
</style>
